body {
	background:url('../images/bg.png') center center no-repeat;
	background-size:cover;
	overflow:hidden
}

section {
	position:relative;
	float:left;
	width:50%;
	height:100%;
}

.site-logo {
	position:absolute;
	left:10%;
	top: .4rem;
	width:3.48rem;
	height:.78rem;
	background-image:url(../images/p_01.png);
	-webkit-animation-delay: .05s;
	animation-delay: .05s
}

.site-star {
	position:absolute;
	top: 12%;
	left:50%;
	z-index:10;
	margin-left:-3.63rem;
	width:7.26rem;
	height:1.74rem;
	background-image:url(../images/p_02_colorful.png);
	-webkit-animation-delay: .1s;
	animation-delay: .1s
}

.site-center {
	position: absolute;
	left: 50%;
	top: 44%;
	width: 4.86rem;
	height: 4.88rem;
	margin-left: -2.3rem;
	/*margin-top:-1rem;*/
}
.go {
	position:absolute;
	top:26%;
	left:50%;
	margin-left:-1.8rem;
	z-index:20;
	width:3.6rem;
	height:1rem;
	line-height:1rem;
	font-size:.46rem;
	color:#681e1e;
	background:#fff;
	text-align:center;
	border-radius:.16rem;
}
.go i {
	padding-left:.3rem;
	font-style:normal;
	font-size:.6rem;
	color:#e71f19;
}

.btn {
	position: absolute;
	left: 50%;
	top: 7.55rem;
	width: 3.9rem;
	height: .83rem;
	line-height: .83rem;
	margin-left: -1.95rem;
	font-size: .3rem;
	color: #f2d455;
	background-color: #fff;
	text-align: center;
	border-radius: .4rem;
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s
}

.btn#signup {
	position: absolute;
	top: 8.7rem;
	width: 3.93rem;
	height: .83rem;
	color: #fff;
	background-color: #2b95b1;
	-webkit-animation-delay: 1.55s;
	animation-delay: 1.55s
}

.btn em {
	display: inline-block;
	width: .42rem;
	height: .41rem;
	margin-right: .24rem;
	position: relative;
	top: .15rem;
	background-image: url("../images/p_05.png")
}

#webchat {
	position: absolute;
	right: .8rem;
	bottom: .21rem;
	width: .39rem;
	height: .3rem;
	background-image: url("../images/p_06.png");
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s
}

#weibo {
	position: absolute;
	right: .28rem;
	bottom: .23rem;
	width: .31rem;
	height: .31rem;
	background-image: url("../images/p_07.png");
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s
}

.title {
	position: absolute;
	left: -.7rem;
	bottom: -.08rem;
	z-index: 3;
	width: 6.27rem;
	height: 1.88rem;
	background-image: url("../images/center.png")
}

.bg1 {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	width: 4.86rem;
	height: 4.87rem;
	margin-left: -2.43rem;
	background: #2b95b1;
	border-radius: 100%
}

#mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
	background: #f2d455;
	opacity:1;
	transition:opacity .8s;
	-webkit-transition:opacity .8s;
}
#mask.active {
	opacity:0;
}

.bg2 {
	position: absolute;
	bottom: 50%;
	z-index: 2;
	width: 100%;
	height: 60%;
	background: #f2d455
}

.city01 {
	position: absolute;
	left: .55rem;
	top: .92rem;
	z-index: 10;
	width: .4rem;
	height: 1.66rem;
	background-image: url("../images/city_01.png");
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s
}

.city02 {
	position: absolute;
	left: .9rem;
	top: 1.35rem;
	z-index: 9;
	width: .31rem;
	height: 1.08rem;
	background-image: url("../images/city_02.png");
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s
}

.city03 {
	position: absolute;
	left: 1rem;
	top: .1rem;
	z-index: 10;
	width: .29rem;
	height: 2.3rem;
	background-image: url("../images/city_03.png");
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s
}

.city04 {
	position: absolute;
	left: 1rem;
	top: 1.18rem;
	z-index: 9;
	width: .41rem;
	height: 1.08rem;
	background-image: url("../images/city_04.png");
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s
}

.city05 {
	position: absolute;
	left: 1.9rem;
	top: 1rem;
	z-index: 3;
	width: 1.27rem;
	height: 1.1rem;
	background-image: url("../images/city_05.png");
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s
}

.city06 {
	position: absolute;
	left: .67rem;
	top: 1.77rem;
	z-index: 10;
	width: 1.47rem;
	height: .66rem;
	background-image: url("../images/city_06.png");
	-webkit-animation-delay: 0.35s;
	animation-delay: 0.35s
}

.city07 {
	position: absolute;
	left: 1.83rem;
	top: 1.55rem;
	z-index: 9;
	width: 1.08rem;
	height: .88rem;
	background-image: url("../images/city_07.png");
	-webkit-animation-delay: 0.45s;
	animation-delay: 0.45s
}

.city08 {
	position: absolute;
	left: 2.14rem;
	top: 1.34rem;
	z-index: 9;
	width: 1.31rem;
	height: 1.09rem;
	background-image: url("../images/city_08.png");
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s
}

.city09 {
	position: absolute;
	left: 3.1rem;
	top: 2.01rem;
	z-index: 7;
	width: 1.1rem;
	height: .42rem;
	background-image: url("../images/city_09.png");
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s
}

.city10 {
	position: absolute;
	left: 3.2rem;
	top: .75rem;
	z-index: 6;
	width: .54rem;
	height: 1.68rem;
	background-image: url("../images/city_10.png");
	-webkit-animation-delay: 0.65s;
	animation-delay: 0.65s
}

.city11 {
	position: absolute;
	left: 3.9rem;
	top: .25rem;
	z-index: 6;
	width: .69rem;
	height: 2.2rem;
	background-image: url("../images/city_11.png");
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s
}

.cloud01 {
	position: absolute;
	left: .5rem;
	top: 1rem;
	z-index: 6;
	width: 1.27rem;
	height: .66rem;
	background-image: url("../images/cloud_01.png");
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s
}

.cloud02 {
	position: absolute;
	left: 1.7rem;
	top: .2rem;
	z-index: 6;
	width: .65rem;
	height: .41rem;
	background-image: url("../images/cloud_02.png");
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s
}

.cloud03 {
	position: absolute;
	left: 2.6rem;
	top: .5rem;
	z-index: 4;
	width: 1.27rem;
	height: .66rem;
	background-image: url("../images/cloud_01.png");
	-webkit-animation-delay: 0.55s;
	animation-delay: 0.55s
}

.pop {
	position: absolute;
	z-index: 11;
	width: .49rem;
	height: .66rem;
	line-height: .6rem;
	background-image: url("../images/pop.png");
	font-size: .12rem;
	color: #fff;
	text-align: center
}

.pop1 {
	left: .5rem;
	top: 0;
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s
}

.pop2 {
	left: 1.17rem;
	top: 1.08rem;
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}

.pop3 {
	left: 2.24rem;
	top: .89rem;
	-webkit-animation-delay: 1.1s;
	animation-delay: 1.1s
}

.pop4 {
	left: 3.42rem;
	top: .4rem;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s
}

.plane {
	position: absolute;
	right: .9rem;
	top: -.9rem;
	z-index: 5;
	width: 3.47rem;
	height: .86rem;
	background-image: url("../images/p_03.png")
}

.star01 {
	position: absolute;
	left: -.37rem;
	top: 3.73rem;
	z-index: 2;
	width: .38rem;
	height: .38rem;
	background-image: url("../images/star_01.png")
}

.star02 {
	position: absolute;
	left: 5rem;
	top: 2.4rem;
	z-index: 4;
	width: .38rem;
	height: .38rem;
	background-image: url("../images/star_02.png")
}

.contrail {
	position: absolute;
	right:-.2rem;
	top: -.15rem;
	z-index: 3;
	width: 3.62rem;
	height: 3.48rem;
	background-image: url("../images/contrail.png")
}

#tdc-layer {
	display: none;
	position: fixed;
	z-index: 20;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5)
}

#tdc-layer .tdc-container {
	position: absolute;
	width: 3.2rem;
	height: 3.2rem;
	left: 50%;
	top: 50%;
	margin-top: -1.6rem;
	margin-left: -1.6rem
}

#tdc-layer p {
	line-height: .4rem;
	color: #fff;
	text-align: center
}


.inner {
	position:absolute;
	top:56%;
	left:50%;
	margin-left:-2.3em;
	width: 6.9rem;
}
.vline{ position: absolute; top: 0; border: 2px solid #e94334; border-top: 0; border-bottom: 0; height: 1000%; width: 5%;}
#right .vline1{ left: 37.5%;}
#right .vline2{ left: 47.5%; margin-left: -4px;}
#right .vline3{ left: 57.5%; margin-left: -4px;}
#right .top,#right .middle,#right .bottom{ position: absolute;}
#right .top {
	width:7rem;
	top:34%;
	left:50%;
	margin-left:-3.5rem;
}
#right .middle {
	width:66%;
}
#right .go {
	top:47%;
}
#right .top .t_tn{ position: absolute; left: 50%; top: 0; width: 30%; -webkit-transform:translate(-50%, -33%); transform:translate(-50%, -33%); }
#right .top .t_star{ position: absolute; top: 33%; -webkit-transform:translate(0, -50%); transform:translate(0, -50%); }
#right .top .t_star01,#right .top .t_star06{ width: 4%;}
#right .top .t_star02,#right .top .t_star05{ width: 5%;}
#right .top .t_star03,#right .top .t_star04{ width: 7%;}
#right .top .t_star01{ left: 12%}
#right .top .t_star02{ left: 18%}
#right .top .t_star03{ left: 24%}
#right .top .t_star04{ right: 26%}
#right .top .t_star05{ right: 20%}
#right .top .t_star06{ right: 14%;}
#right .middle .m_vb1,#right .middle .m_vb2,#right .middle .m_music,#right .middle .m_music2,#right .middle .m_man1,#right .middle .m_man2,#right .middle .m_man3,#right .middle .m_mic{ position: absolute; }
#right .middle .m_vb1{ left:0; bottom: 5%; -webkit-transform:translate(-20%, 0); transform:translate(-20%, 0); width: 50%;}
#right .middle .m_vb2{ right:2%; bottom: 0; -webkit-transform:translate(60%, 0); transform:translate(60%, 0); width: 46%;}
#right .middle .m_man1{ left: 5%; bottom: -10px; width: 50%;}
#right .middle .m_man2{ left: 35%; bottom: -10%; width: 50%;}
#right .middle .m_man3{ right: 4%; bottom: -10px; width: 40%;}
#right .middle .m_music{ left: -1%; top: 35%; width: 16%;}
#right .middle .m_music2{ left:62%; top: 3%; width: 18%;}
#right .middle .m_mic{ left: 56%; bottom: -10%; width: 7%;}
.m_man1 {
	-webkit-animation-delay:.05s;
		animation-delay:.05s;
}
.m_man2 {
	-webkit-animation-delay:.1s;
		animation-delay:.1s;
}
.m_man3 {
	-webkit-animation-delay:.2s;
		animation-delay:.2s;
}
.m_mic {
	-webkit-animation-delay:.15s;
		animation-delay:.15s;
}